import { View, Text, ScrollView } from '@tarojs/components';
import { useState } from 'react';
import Taro from '@tarojs/taro';
import { AtButton } from 'taro-ui';
import Modal from '@/components/Modal/index';
import Radio from '@/components/Radio';
import './index.scss';

interface IProps {
  show: boolean;
  list: any[];
  onSelect: (user: any) => void;
  onClose: () => void;
}

export default function ({ show, list, onSelect = () => {}, onClose }: IProps) {
  const [selectValue, setSelectValue] = useState<number | string>('');
  const _onSelect = (value: number | string) => {
    setSelectValue(value);
    const user = list.filter(item => item.id === value)?.[0];
    onSelect(user);
  };

  const toEditUser = (user?: any) => {
    console.log('user: ', user);
    Taro.navigateTo({
      url: `/subPages/address/addAddress/index?addressInfo=${JSON.stringify(user)}`,
    });
  };

  return (
    <Modal title="选择提货人" show={show} onClose={onClose} className="select-user-modal">
      <View className="select-content">
        <ScrollView className="scroll-view" scrollY>
          <View className="select-list">
            {list.map((item) => {
              return (
                <View key={item.id} className="select-item">
                  <Radio value={item.id} checked={selectValue === item.id} onChange={_onSelect}>
                    {item.name}，{item.mobile}
                  </Radio>
                  <Text className="iconfont icon-edit" onClick={() => toEditUser(item)} />
                </View>
              );
            })}
          </View>
        </ScrollView>
        <AtButton type="primary" className="add-user" onClick={() => toEditUser()}>
          新增提货人
        </AtButton>
      </View>
    </Modal>
  );
}
